<template>
  <div class="smicon">
    <!-- 小图标 -->
    <p>我的泊寓</p>
    <div class="icon">
      <div class="group" v-for="(item,i) of obj" :key="i">
        <div>
          <img :src="require(`../../assets/${item}`)" alt="">
        </div>
        <p>{{i}}</p>
      </div>
    </div>
  </div>

</template>
<script>
export default {
  data(){
    return {
      obj:{
        账单:"bill.png",
        水电表:"meter.png",
        我有建议:"advi.png",
        智能门锁:"door.png",
        报修:"repa.png",
        社区活动:"acti.png",
        合同:"cont.png"
      }
    }
  }
}
</script>
<style scoped>
.smicon {
  margin-top: 60px;
}
.smicon > p {
  font-size: 20px;
}
.smicon > .icon {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  /* justify-content: space-around; */
  margin-top: 20px;
  text-align: center;
  background-color: #fff;
  border-radius: 5px;
}
.smicon > .icon > .group {
  width: 25%;
  margin: 30px 0;
}
.smicon > .icon p {
  font-size: 10px;
}
</style>